<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        .reveal pre code {
            background-color: #120;
        }
    </style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h4>小课堂【萌新】</h4>
            <h4>【js task2】PX、EM、REM、%、VW、VH、VM等单位有什么区别？</h4>
            <h4>分享人：王寒</h4>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <p>
                    传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <p>
                    1、px <br />
                    px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。</br>
                </p>
            </section>
            <section>
                <p>
                    2、em<br />
                    参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
                </p>
            </section>
            <section>
                <p>
                    3、rem<br />
                    css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
                </p>
            </section>
            <section>
                <p>
                    4、%<br />
                    一般宽泛的讲是相对于父元素，但是并不是十分准确。
                    1、对于普通定位元素就是我们理解的父元素
                    2、对于position: absolute;的元素是相对于已定位的父元素
                    3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
                </p>
            </section>
            <section>
                <p>
                    5、vw<br />
                    css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
                    举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
                </p>
            </section>
            <section>
                <p>
                    6、vh<br />
                    css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
                    举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
                </p>
            </section>
            <section>
                <p>
                    7、vm <br />
                    css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
                    举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
                </p>
            </section>
        </section>

        <section>
            <section>
                <h3>3.常见问题</h3>
            </section>
            <section>
                <p>vh vw vm实际应用场景？</p>
            </section>
        </section>
        <section>
            <section>
                <h3>4.解决方案</h3>
            </section>
            <section>
                vh vw是不包含页面滚动条的视窗宽度(innerwidth)，%包含了滚动条的宽度在里面了(outerwidth)。
                一般的情况下%就可以满足大部分自适应设计的需求，可以用height：100vh做一个高度占满屏幕的自适应，没有滚动条。
                用vw，vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。
            </section>
        </section>
        <section>
            <section>
                <h3>5.编码实战</h3>
            </section>
            <section>
                <!--<a href="">demo</a>-->
            </section>
        </section>
        <section>
            <section>
                <h3>6.扩展思考</h3>
            </section>
            <section>
                <p>
                    css还有哪些长度单位？<br />
                    in:寸<br />
                    cm:厘米<br />
                    mm:毫米<br />
                    t:point，大约1/72寸<br />
                    pc:pica，大约6pt，1/6寸<br />
                    1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px <br />
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>7.参考文献</h3>
            </section>
            <section>
                <p>
                    <a href="https://www.cnblogs.com/alex-415/p/6844243.html">PX、EM、REM、%、VW、VH、VM等单位有什么区别？</a>
                </p>
            </section>
        </section>
        <section>
            <section>
                <h3>8.更多讨论</h3>
            </section>
            <section>
                <p>
                    css中font-size的单位有px、em、pt 用哪个哪个最好 ？<br />
                    <a href="https://zhidao.baidu.com/question/143251109.html">剖析</a>
                </p>
            </section>
        </section>
        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                By
                <small style="vertical-align: middle">王寒</small>
            </p>
        </section>
    </div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                    hljs.initHighlightingOnLoad();
                }
            }
        ]
    });
</script>
</body>
</html>